<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>管理后台</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
		<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
		<link rel="stylesheet" href="./css/font.css">
		<link rel="stylesheet" href="./css/xadmin.css">
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="./lib/layui/layui.js" charset="utf-8"></script>
		<script type="text/javascript" src="./js/xadmin.js"></script>
		<script src="js/config.js" type="application/javascript"></script>
		<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
		<!--[if lt IE 9]>
      <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
      <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
	</head>

	<body>
		<div class="x-body">
			<form class="layui-form" lay-filter="apiinfo">
				<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
					<ul class="layui-tab-title">
						<li class="layui-this">主要信息</li>
						<li>Header</li>
						<li>接口请求</li>
						<li>保存参数</li>
						<li>断言</li>
						<li style="float: right;">
							<div class="layui-form-item" style="text-align: left; margin-left:-100px">
								<div class="layui-input-block">
									<button class="layui-btn" lay-submit lay-filter="formDemo">保存</button>
								</div>
							</div>
						</li>
					</ul>
					<div class="layui-tab-content" style="height: 100px;">
						<div class="layui-tab-item layui-show">
							<div class="layui-form-item" style="width: 50%; margin-left: -20px; margin-top: 20px;">
								<label class="layui-form-label">步骤名称</label>
								<div class="layui-input-block">
									<input type="text" name="stepname" required lay-verify="required" placeholder="请输入步骤名称" autocomplete="off"
									 class="layui-input">
								</div>
							</div>

						</div>

						<div class="layui-tab-item">
							<div class="layui-form-item">
								<div class="layui-inline">
									<label class="layui-form-label">header1</label>
								</div>
								<div class="layui-inline">
									<div class="layui-input-block" style="width: 150px; margin-left: -10px;">
										<input type="text" name="headerkey1" placeholder="请输入header名称" autocomplete="off" class="layui-input">
									</div>
								</div>
								<div class="layui-inline">
									<div class="layui-input-block" style="width: 300px; margin-left: -10px;">
										<input type="text" name="headervalue1" placeholder="请输入值" autocomplete="off" class="layui-input">
									</div>
								</div>
							</div>
							<div class="layui-form-item">
								<div class="layui-inline">
									<label class="layui-form-label">header2</label>
								</div>
								<div class="layui-inline">
									<div class="layui-input-block" style="width: 150px; margin-left: -10px;">
										<input type="text" name="headerkey2" placeholder="请输入header名称" autocomplete="off" class="layui-input">
									</div>
								</div>
								<div class="layui-inline">
									<div class="layui-input-block" style="width: 300px; margin-left: -10px;">
										<input type="text" name="headervalue2" placeholder="请输入值" autocomplete="off" class="layui-input">
									</div>
								</div>
							</div>
							<div class="layui-form-item">
								<div class="layui-inline">
									<label class="layui-form-label">header3</label>
								</div>
								<div class="layui-inline">
									<div class="layui-input-block" style="width: 150px; margin-left: -10px;">
										<input type="text" name="headerkey3" placeholder="请输入header名称" autocomplete="off" class="layui-input">
									</div>
								</div>
								<div class="layui-inline">
									<div class="layui-input-block" style="width: 300px; margin-left: -10px;">
										<input type="text" name="headervalue3" placeholder="请输入值" autocomplete="off" class="layui-input">
									</div>
								</div>
							</div>
							<div class="layui-form-item">
								<div class="layui-inline">
									<label class="layui-form-label">header4</label>
								</div>
								<div class="layui-inline">
									<div class="layui-input-block" style="width: 150px; margin-left: -10px;">
										<input type="text" name="headerkey4" placeholder="请输入header名称" autocomplete="off" class="layui-input">
									</div>
								</div>
								<div class="layui-inline">
									<div class="layui-input-block" style="width: 300px; margin-left: -10px;">
										<input type="text" name="headervalue4" placeholder="请输入值" autocomplete="off" class="layui-input">
									</div>
								</div>
							</div>
							<div class="layui-form-item">
								<div class="layui-inline">
									<label class="layui-form-label">header5</label>
								</div>
								<div class="layui-inline">
									<div class="layui-input-block" style="width: 150px; margin-left: -10px;">
										<input type="text" name="headerkey5" placeholder="请输入值" autocomplete="off" class="layui-input">
									</div>
								</div>
								<div class="layui-inline">
									<div class="layui-input-block" style="width: 300px; margin-left: -10px;">
										<input type="text" name="headervalue5" placeholder="请输入值" autocomplete="off" class="layui-input">
									</div>
								</div>
							</div>

						</div>

						<div class="layui-tab-item">
							<div class="layui-form-item">
								<label class="layui-form-label">接口地址</label>
								<div class="layui-input-block">
									<input type="text" name="api" required lay-verify="required" placeholder="请输入接口地址" autocomplete="off" class="layui-input">
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">请求方式</label>
								<div class="layui-input-block">
									<input type="radio" name="method" value="post" title="POST请求" checked>
									<input type="radio" name="method" value="get" title="GET请求">
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">ContentType</label>
								<div class="layui-input-block" id="contenttypelist">
									<input type="radio" name="contenttype" value="1" title="application/json" checked>
									<input type="radio" name="contenttype" value="2" title="application/x-www-form-urlencoded">
									<input type="radio" name="contenttype" value="4" title="text/html">
								</div>
							</div>
							<div class="layui-form-item layui-form-text">
								<label class="layui-form-label">请求BODY</label>
								<div class="layui-input-block">
									<textarea name="testdata" style="height: 300px;" placeholder="请输入BODY内容" class="layui-textarea"></textarea>
								</div>
							</div>
						</div>
						<div class="layui-tab-item">
							<div class="layui-form-item">
								<div class="layui-inline">
									<label class="layui-form-label">参数1</label>
									<div class="layui-input-block" style="width: 120px;">
										<select name="xuanqufangshi1" lay-filter="xuanqufangshi1">
											<option value="jsonPath">JSONPATH</option>
											<option value="leftright">边界取值</option>
										</select>
									</div>
								</div>
								<div class="layui-inline">
									<div class="layui-input-block" style="width: 150px; margin-left: -10px;">
										<input type="text" name="paramname1" placeholder="请输入参数名称" autocomplete="off" class="layui-input">
									</div>
								</div>
								<div class="layui-inline" id="csgz1">
									<div class="layui-input-block" style="width: 300px; margin-left: -10px;">
										<input type="text" name="rule1" placeholder="请输入规则表达式" autocomplete="off" class="layui-input">
									</div>
								</div>
								<div class="layui-inline" id="left1">
									<div class="layui-input-block" style="margin-left: -10px;">
										<input type="text" name="left1" placeholder="左边界" autocomplete="off" class="layui-input">
									</div>
								</div>
								<div class="layui-inline" id="right1">
									<div class="layui-input-block" style="margin-left: -10px;">
										<input type="text" name="right1" placeholder="右边界" autocomplete="off" class="layui-input">
									</div>
								</div>
							</div>
							<div class="layui-form-item">
								<div class="layui-inline">
									<label class="layui-form-label">参数2</label>
									<div class="layui-input-block" style="width: 120px;">
										<select name="xuanqufangshi2" lay-filter="xuanqufangshi2">
											<option value="jsonPath">JSONPATH</option>
											<option value="leftright">边界取值</option>
										</select>
									</div>
								</div>
								<div class="layui-inline">
									<div class="layui-input-block" style="width: 150px; margin-left: -10px;">
										<input type="text" name="paramname2" placeholder="请输入参数名称" autocomplete="off" class="layui-input">
									</div>
								</div>
								<div class="layui-inline" id="csgz2">
									<div class="layui-input-block" style="width: 300px; margin-left: -10px;">
										<input type="text" name="rule2" placeholder="请输入规则表达式" autocomplete="off" class="layui-input">
									</div>
								</div>
								<div class="layui-inline" id="left2">
									<div class="layui-input-block" style="margin-left: -10px;">
										<input type="text" name="left2" placeholder="左边界" autocomplete="off" class="layui-input">
									</div>
								</div>
								<div class="layui-inline" id="right2">
									<div class="layui-input-block" style="margin-left: -10px;">
										<input type="text" name="right2" placeholder="右边界" autocomplete="off" class="layui-input">
									</div>
								</div>
							</div>
							<div class="layui-form-item">
								<div class="layui-inline">
									<label class="layui-form-label">参数3</label>
									<div class="layui-input-block" style="width: 120px;">
										<select name="xuanqufangshi3" lay-filter="xuanqufangshi3">
											<option value="jsonPath">JSONPATH</option>
											<option value="leftright">边界取值</option>
										</select>
									</div>
								</div>
								<div class="layui-inline">
									<div class="layui-input-block" style="width: 150px; margin-left: -10px;">
										<input type="text" name="paramname3" placeholder="请输入参数名称" autocomplete="off" class="layui-input">
									</div>
								</div>
								<div class="layui-inline" id="csgz3">
									<div class="layui-input-block" style="width: 300px; margin-left: -10px;">
										<input type="text" name="rule3" placeholder="请输入规则表达式" autocomplete="off" class="layui-input">
									</div>
								</div>
								<div class="layui-inline" id="left3">
									<div class="layui-input-block" style="margin-left: -10px;">
										<input type="text" name="left3" placeholder="左边界" autocomplete="off" class="layui-input">
									</div>
								</div>
								<div class="layui-inline" id="right3">
									<div class="layui-input-block" style="margin-left: -10px;">
										<input type="text" name="right3" placeholder="右边界" autocomplete="off" class="layui-input">
									</div>
								</div>
							</div>
							<div class="layui-form-item">
								<div class="layui-inline">
									<label class="layui-form-label">参数4</label>
									<div class="layui-input-block" style="width: 120px;">
										<select name="xuanqufangshi4" lay-filter="xuanqufangshi4">
											<option value="jsonPath">JSONPATH</option>
											<option value="leftright">边界取值</option>
										</select>
									</div>
								</div>
								<div class="layui-inline">
									<div class="layui-input-block" style="width: 150px; margin-left: -10px;">
										<input type="text" name="paramname4" placeholder="请输入参数名称" autocomplete="off" class="layui-input">
									</div>
								</div>
								<div class="layui-inline" id="csgz4">
									<div class="layui-input-block" style="width: 300px; margin-left: -10px;">
										<input type="text" name="rule4" placeholder="请输入规则表达式" autocomplete="off" class="layui-input">
									</div>
								</div>
								<div class="layui-inline" id="left4">
									<div class="layui-input-block" style="margin-left: -10px;">
										<input type="text" name="left4" placeholder="左边界" autocomplete="off" class="layui-input">
									</div>
								</div>
								<div class="layui-inline" id="right4">
									<div class="layui-input-block" style="margin-left: -10px;">
										<input type="text" name="right4" placeholder="右边界" autocomplete="off" class="layui-input">
									</div>
								</div>
							</div>
							<div class="layui-form-item">
								<div class="layui-inline">
									<label class="layui-form-label">参数5</label>
									<div class="layui-input-block" style="width: 120px;">
										<select name="xuanqufangshi5" lay-filter="xuanqufangshi5">
											<option value="jsonPath">JSONPATH</option>
											<option value="leftright">边界取值</option>
										</select>
									</div>
								</div>
								<div class="layui-inline">
									<div class="layui-input-block" style="width: 150px; margin-left: -10px;">
										<input type="text" name="paramname5" placeholder="请输入参数名称" autocomplete="off" class="layui-input">
									</div>
								</div>
								<div class="layui-inline" id="csgz5">
									<div class="layui-input-block" style="width: 300px; margin-left: -10px;">
										<input type="text" name="rule5" placeholder="请输入规则表达式" autocomplete="off" class="layui-input">
									</div>
								</div>
								<div class="layui-inline" id="left5">
									<div class="layui-input-block" style="margin-left: -10px;">
										<input type="text" name="left5" placeholder="左边界" autocomplete="off" class="layui-input">
									</div>
								</div>
								<div class="layui-inline" id="right5">
									<div class="layui-input-block" style="margin-left: -10px;">
										<input type="text" name="right5" placeholder="右边界" autocomplete="off" class="layui-input">
									</div>
								</div>
							</div>

						</div>
						<div class="layui-tab-item">
							<div class="layui-form-item">
								<div class="layui-inline">
									<label class="layui-form-label">断言1</label>
								</div>
								<div class="layui-inline">
									<div class="layui-input-block" style="width: 150px; margin-left: -10px;">
										<input type="text" name="sjjg1" placeholder="实际结果" autocomplete="off" class="layui-input">
									</div>
								</div>
								<div class="layui-inline" style="width:80px; margin-left: -10px;">
									<select id="dygz1" name="dygz1">
										<option value="=">等于</option>
										<option value="=">不等于</option>
										<option value="=">大于</option>
										<option value="=">小于</option>
										<option value="=">大于等于</option>
										<option value="=">小于等于</option>
										<option value="=">包含</option>
										<option value="=">不包含</option>
									</select>
								</div>
								<div class="layui-inline">
									<div class="layui-input-block" style="margin-left: -10px;">
										<input type="text" name="yqjg1" placeholder="预期结果" autocomplete="off" class="layui-input">
									</div>
								</div>
							</div>
							
							<div class="layui-form-item">
								<div class="layui-inline">
									<label class="layui-form-label">断言2</label>
								</div>
								<div class="layui-inline">
									<div class="layui-input-block" style="width: 150px; margin-left: -10px;">
										<input type="text" name="sjjg2" placeholder="实际结果" autocomplete="off" class="layui-input">
									</div>
								</div>
								<div class="layui-inline" style="width:80px; margin-left: -10px;">
									<select id="dygz2" name="dygz2">
										<option value="=">等于</option>
										<option value="=">不等于</option>
										<option value="=">大于</option>
										<option value="=">小于</option>
										<option value="=">大于等于</option>
										<option value="=">小于等于</option>
										<option value="=">包含</option>
										<option value="=">不包含</option>
									</select>
								</div>
								<div class="layui-inline">
									<div class="layui-input-block" style="margin-left: -10px;">
										<input type="text" name="yqjg2" placeholder="预期结果" autocomplete="off" class="layui-input">
									</div>
								</div>
							</div>
							<div class="layui-form-item">
								<div class="layui-inline">
									<label class="layui-form-label">断言3</label>
								</div>
								<div class="layui-inline">
									<div class="layui-input-block" style="width: 150px; margin-left: -10px;">
										<input type="text" name="sjjg3" placeholder="实际结果" autocomplete="off" class="layui-input">
									</div>
								</div>
								<div class="layui-inline" style="width:80px; margin-left: -10px;">
									<select id="dygz3" name="dygz3">
										<option value="=">等于</option>
										<option value="=">不等于</option>
										<option value="=">大于</option>
										<option value="=">小于</option>
										<option value="=">大于等于</option>
										<option value="=">小于等于</option>
										<option value="=">包含</option>
										<option value="=">不包含</option>
									</select>
								</div>
								<div class="layui-inline">
									<div class="layui-input-block" style="margin-left: -10px;">
										<input type="text" name="yqjg3" placeholder="预期结果" autocomplete="off" class="layui-input">
									</div>
								</div>
							</div>
							<div class="layui-form-item">
								<div class="layui-inline">
									<label class="layui-form-label">断言4</label>
								</div>
								<div class="layui-inline">
									<div class="layui-input-block" style="width: 150px; margin-left: -10px;">
										<input type="text" name="sjjg4" placeholder="实际结果" autocomplete="off" class="layui-input">
									</div>
								</div>
								<div class="layui-inline" style="width:80px; margin-left: -10px;">
									<select id="dygz4" name="dygz4">
										<option value="=">等于</option>
										<option value="=">不等于</option>
										<option value="=">大于</option>
										<option value="=">小于</option>
										<option value="=">大于等于</option>
										<option value="=">小于等于</option>
										<option value="=">包含</option>
										<option value="=">不包含</option>
									</select>
								</div>
								<div class="layui-inline">
									<div class="layui-input-block" style="margin-left: -10px;">
										<input type="text" name="yqjg4" placeholder="预期结果" autocomplete="off" class="layui-input">
									</div>
								</div>
							</div>
							<div class="layui-form-item">
								<div class="layui-inline">
									<label class="layui-form-label">断言5</label>
								</div>
								<div class="layui-inline">
									<div class="layui-input-block" style="width: 150px; margin-left: -10px;">
										<input type="text" name="sjjg5" placeholder="实际结果" autocomplete="off" class="layui-input">
									</div>
								</div>
								<div class="layui-inline" style="width:80px; margin-left: -10px;">
									<select id="dygz5" name="dygz5">
										<option value="=">等于</option>
										<option value="=">不等于</option>
										<option value="=">大于</option>
										<option value="=">小于</option>
										<option value="=">大于等于</option>
										<option value="=">小于等于</option>
										<option value="=">包含</option>
										<option value="=">不包含</option>
									</select>
								</div>
								<div class="layui-inline">
									<div class="layui-input-block" style="margin-left: -10px;">
										<input type="text" name="yqjg5" placeholder="预期结果" autocomplete="off" class="layui-input">
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>

			</form>
		</div>
	</body>

	<script>
		//Demo
		layui.use('form', function() {
			var form = layui.form;
			var router = layui.router();
			var testcaseid = router.search.id;
			
			$("#left1").hide();
			$("#right1").hide();
			$("#left2").hide();
			$("#right2").hide();
			$("#left3").hide();
			$("#right3").hide();
			$("#left4").hide();
			$("#right4").hide();
			$("#left5").hide();
			$("#right5").hide();
			
			form.on('submit(formDemo)', function(data) {

				$.ajax({
					url: base_url + '/testcase/' + testcaseid + '' + '/addstep',
					type: 'post',
					contentType: 'application/json; charset=utf-8',
					data: JSON.stringify(data.field),
					dataType: 'json',
					async: false,
					success: function(result) {
						if (result.code == '0') {
							layer.msg('添加成功');
							var index = parent.layer.getFrameIndex(window.name);
							parent.layer.close(index);
						} else {
							layer.msg(result.msg);
						}
					}
				});

				return false;

			});
			
			form.on('select(xuanqufangshi1)', function(data) { 
				if(data.value == "leftright") {
					$("#csgz1").hide();
					$("#left1").show();
					$("#right1").show();
				}else{
					$("#csgz1").show();
					$("#left1").hide();
					$("#right1").hide();
				}
			});
			
			form.on('select(xuanqufangshi2)', function(data) { 
				if(data.value == "leftright") {
					$("#csgz2").hide();
					$("#left2").show();
					$("#right2").show();
				}else{
					$("#csgz2").show();
					$("#left2").hide();
					$("#right2").hide();
				}
			});
			
			form.on('select(xuanqufangshi3)', function(data) { 
				if(data.value == "leftright") {
					$("#csgz3").hide();
					$("#left3").show();
					$("#right3").show();
				}else{
					$("#csgz3").show();
					$("#left3").hide();
					$("#right3").hide();
				}
			});
			
			form.on('select(xuanqufangshi4)', function(data) { 
				if(data.value == "leftright") {
					$("#csgz4").hide();
					$("#left4").show();
					$("#right4").show();
				}else{
					$("#csgz4").show();
					$("#left4").hide();
					$("#right4").hide();
				}
			});
			
			form.on('select(xuanqufangshi5)', function(data) { 
				if(data.value == "leftright") {
					$("#csgz5").hide();
					$("#left5").show();
					$("#right5").show();
				}else{
					$("#csgz5").show();
					$("#left5").hide();
					$("#right5").hide();
				}
			});

		});
	</script>

</html>
